<template>
  <!-- 设置圈子页面 -->
  <view class="main">
    <view class="top">
      <view class="left">
        <image :src="img" mode="aspectFill"></image>
      </view>
      <view class="right">
        <view class="one">
          {{ name }}
        </view>
        <navigator
          :url="'/pages/my_circle/basicInfo?id=' + quan_id"
          hover-class="none"
        >
          <view class="two">
            基本信息
            <image src="../../imges/you1.png" mode="aspectFill"></image>
          </view>
        </navigator>
      </view>
    </view>
    <view class="list">
      <navigator
        :url="'/pages/my_circle/customTag?id=' + quan_id"
        hover-class="none"
      >
        <view class="item">
          <view class="left"> 自定义标签 </view>
          <view class="right">
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </navigator>
      <navigator
        :url="'/pages/my_circle/memberSet?id=' + quan_id"
        hover-class="none"
      >
        <view class="item">
          <view class="left"> 成员管理 </view>
          <view class="right">
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </navigator>

      <navigator
        :url="'/pages/my_circle/chargeSet?id=' + quan_id"
        hover-class="none"
      >
        <view class="item">
          <view class="left"> 收费设置 </view>
          <view class="right">
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </navigator>

      <navigator
        url="/pages/my_circle/permissions"
        hover-class="none"
        v-if="false"
      >
        <view class="item item1">
          <view class="left"> 权限管理 </view>
          <view class="right">
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </navigator>
    </view>
    <view class="btn" @tap="handleZhuX"> 注销圈子 </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      quan_id: "", //圈子id
      name: "",
      img: "",
      code: "",
    };
  },
  onLoad(options) {
    if (options.code) {
      this.code = options.code;
    }
    this.quan_id = options.id;
    this.name = options.name;
    this.img = options.img;
  },
  methods: {
    handleZhuX() {
      //注销圈子
      uni.showModal({
        title: "提示",
        content: "是否注销该圈子",
        confirmText: "注销",
        confirmColor: "#000",
        cancelText: "再想想",
        cancelColor: "#007aff",
        success: (re) => {
          if (re.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/orgCircle/cancelCircle",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  orgId: this.quan_id,
                },
              }).then((res) => {
                // console.log(res, '注销圈子')
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "注销成功",
                    duration: 1500,
                    icon: "none",
                  });
                  setTimeout((v) => {
                    if (this.code == 1) {
                      // uni.navigateBack({
                      //     delta: 2
                      // });
                      uni.navigateTo({
                        url: "/pages/index/index",
                      });
                    } else {
                      uni.navigateBack({
                        delta: 1,
                      });
                    }
                  }, 1500);
                  // this.findList = res.data.data
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}

.top {
  padding: 28rpx 32rpx;
  padding-top: 40rpx;
  background-color: #2168eb;
  display: flex;

  .left {
    width: 114rpx;
    height: 114rpx;
    border: 10rpx solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 13rpx;
    flex-shrink: 0;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    height: 114rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .one {
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .two {
      max-width: 172rpx;
      height: 36rpx;
      // line-height: 35rpx;
      background: #999999;
      border-radius: 19rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      padding: 0 22rpx;
      box-sizing: border-box;
      position: relative;
      top: -3rpx;
      display: flex;
      align-items: center;
      image {
        height: 26rpx;
        width: 20rpx;
        margin-left: 6rpx;
        display: inline-block;
      }
    }
  }
}

.list {
  padding: 0 32rpx;
  background-color: #fff;

  .item {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 0;
    background-color: #fff;
    border-bottom: 2rpx solid #eee;

    .left {
      font-size: 34rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(70, 70, 70, 1);
    }

    .right {
      width: 16rpx;
      height: 30rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .item1 {
    border-bottom: none;
  }
}

.btn {
  width: 330rpx;
  height: 74rpx;
  background: rgba(255, 73, 73, 1);
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 160rpx auto;
}
</style>
